<template>
	<div class="toTop" ref="box" :style="{'left':left,'right':right,'top':top,'bottom':bottom}" >
		<span class="iconfont" style="font-size: 30px;">&#xe88d;</span>
	</div>
</template>

<script>
	export default{
		props:['left','right','top','bottom'],
		methods:{
			show(){
				this.$refs.box.style.display='block'
			},
			hidden(){
				this.$refs.box.style.display='none'
			}
		},
		computed:{
			left(){
				return this.$props.left=='null'?null:
							this.$props.left+'px'
			},
			right(){
				return this.$props.right=='null'?null:
							this.$props.right+'px'
			},
			top(){
				return this.$props.top=='null'?null:
							this.$props.top+'px'
			},
			bottom(){
				return this.$props.bottom=='null'?null:
							this.$props.bottom+'px'
			}
		},
		mounted(){
			this.hidden()
		}
	}
</script>

<style scoped>
	.toTop{
		position: fixed;
		font-weight: bold;
		color: #DF5000;
		cursor: pointer;
	}
</style>
